<html>
    <head>
    <style>
    body {
        background-color:#FFFFFF;
        font: "arial";
        color: #102C49;
        font-size:18px;
    }
    .board{
        position:absolute;
        top:0;
        left:0;
        background-color: #F9F9F9;
        width:500px;
        height:500px;
    }
    img {
        position:absolute;
        width:15px;
        height:15px;
    }
    </style>
</head>


<script type="text/javascript">

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  C L A S S

    function ClassBall( id , left , top  , x,y  ) {
        this.id = id;
        this.x=x;
        this.y=y;
        this.top=top;
        this.left=left;

        // S T A T I C
        document.write("<img id='ball_" + this.id + "' src='ball"+(parseInt(rnd(2))+1)+".gif' style='left: "+left+"px; top: "+top+"px;'>");

        this.move = function ( ) {
            document.title = arrBalls[1].top;  //this.top;  //debug

            //this.y=this.y - 0.1;
            //this.x=this.x - 0.1;

            this.top  = this.top  + this.y;
            this.left = this.left + this.x;

            document.getElementById("ball_"+this.id).style.top = ""+ this.top +"px";
            document.getElementById("ball_"+this.id).style.left = ""+ this.left +"px";

            this.colision();
        }
        this.colision = function( ) {
            if ( this.top<000  || this.top  > 500 ) { this.y = this.y * -1; }
            if ( this.left<000 || this.left > 500 ) { this.x = this.x * -1; }
            var n=0;
            for (n=0; n<totalBalls; n++) {
                if (n!=this.id) {
                    if (arrBalls[n].top>this.top-15   &&
                        arrBalls[n].top<this.top+15   &&
                        arrBalls[n].left>this.left-15 &&
                        arrBalls[n].left<this.left+15 ) {
                           /*
                           this.x=this.x*-1;
                           this.y=this.y*-1;
                           arrBalls[n].x=arrBalls[n].x*-1;
                           arrBalls[n].y=arrBalls[n].y*-1;
                           */
                           var tempX = this.x;
                           var tempY = this.y;
                           this.x=arrBalls[n].x;
                           this.y=arrBalls[n].y;
                           arrBalls[n].x=tempX;
                           arrBalls[n].y=tempY;

                    }
                }
            }
            
        }

    }

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  M A I N 

    var totalBalls = 6;
    var arrBalls = [];

    for (n=0; n<totalBalls; n++) {
        var objBall = new ClassBall( n , rnd(500),rnd(500) , rnd(4),rnd(4) );
        arrBalls[n]=objBall;
    }
    
    thread();

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  F U N C T I O N S 
    function rnd(n){
        return Math.random()*n;
    }

    function thread(){
        for (n=0; n<totalBalls; n++)  
             arrBalls[n].move();
        setTimeout( "thread()" , 20 );
    }
    
    </script>

<body>
</body>

</html>